<template>
  <div class='antoSystem'>
    <div class="content_wrap">
      <div class='titlebox' >
        <b><div class='title'>同步信息列表</div></b>
        <at-button type='primary' class='clearanto' @click='history()' style='position:relative;width:110px'>
          <i class="saas-icon-clock" style="position:absolute;top:5px;left:3px;font-size:20px" ></i>
            <span style='margin-right:-20px'>查看历史信息</span> 
        </at-button>
        <at-button type='primary' style='position:relative;width:110px' class='history' @click='deleteall()' :disabled="syn_add.total === 0 && syn_edit.total=== 0&& syn_del.total === 0">
          <i class="saas-icon-icon-close" style="position:absolute;top:5px;left:3px;font-size:20px" ></i>
            <span style='margin-right:-20px'>清空同步信息</span> 
        </at-button>
      </div>
      <div class='bigtable'>
        <div class='table_wrap'>
          <div class='min_table' >
            <div class='message' >新增信息系统信息<span :class="{'doubleNum':syn_add.total.toString().length === 2, 'singleNum': syn_add.total.toString().length === 1, 'more': syn_add.total>99, 'common': true}">  
              <span class="infoCount" v-if="syn_add.total<=99"> {{syn_add.total}}</span>  
              <span class="infoCount" v-else>99+</span>
            </span></div> 
            <div class='table_box' >
              <at-table 
              style="width:100%;"
              max-height="251" 
              :data='syn_add.table'
              :show-header='true'
              :border='false'
              @sort-change = "sortChangeadd" 
              >  
              <at-table-column show-overflow-tooltip label='同步时间' prop='er_time' sortable="custom" min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统编号' prop='asystem_id' min-width='160px'></at-table-column>        
              <at-table-column show-overflow-tooltip label='信息系统名称' prop='asystem_name_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统描述' prop='asystem_desc_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统代码' prop='asys_code_change' min-width='130px'></at-table-column>
              <at-table-column show-overflow-tooltip label='url地址' prop='aurl_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='所属机构' prop='aagency_name_change' min-width='160px'></at-table-column>
              
              </at-table>  
            </div>
          </div>
        </div>
        <div class='table_wrap'>
          <div class='min_table' >
            <div class='message' >修改信息系统信息<span :class="{'doubleNum':syn_edit.total.toString().length === 2, 'singleNum': syn_edit.total.toString().length === 1, 'more': syn_edit.total>99, 'common': true}">  
              <span class="infoCount" v-if="syn_edit.total<=99"> {{syn_edit.total}}</span>  
              <span class="infoCount" v-else>99+</span>
            </span></div>     
            <div class='table_box' >
              <at-table 
              style="width:100%;"
              max-height="251" 
              :data='syn_edit.table'
              :show-header='true'
              :border='false'
              @sort-change = "sortChangeedit" 
              >  
              <at-table-column show-overflow-tooltip label='同步时间' prop='er_time' sortable="custom" min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统编号' prop='asystem_id' min-width='160px'></at-table-column>        
              <at-table-column show-overflow-tooltip label='信息系统名称' prop='asystem_name_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统描述' prop='asystem_desc_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统代码' prop='asys_code_change' min-width='130px'></at-table-column>
              <at-table-column show-overflow-tooltip label='url地址' prop='aurl_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='所属机构' prop='aagency_name_change' min-width='160px'></at-table-column>
              </at-table>  
            </div>
          </div>
        </div>
        <div class='table_wrap'>
          <div class='min_table' >
            <div class='message' >删除信息系统信息<span :class="{'doubleNum':syn_del.total.toString().length === 2, 'singleNum': syn_del.total.toString().length === 1, 'more': syn_del.total>99, 'common': true}">  
              <span class="infoCount" v-if="syn_del.total<=99"> {{syn_del.total}}</span>  
              <span class="infoCount" v-else>99+</span>
            </span></div>
            <div class='table_box' >
              <at-table 
              style="width:100%"
              max-height="251" 
              :data='syn_del.table'
              :show-header='true'
              :border='false'
              @sort-change = "sortChangedel" 
              >  
              <at-table-column show-overflow-tooltip label='同步时间' prop='er_time' sortable="custom" min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统编号' prop='asystem_id' min-width='160px'></at-table-column>        
              <at-table-column show-overflow-tooltip label='信息系统名称' prop='asystem_name_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统描述' prop='asystem_desc_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='信息系统代码' prop='asys_code_change' min-width='130px'></at-table-column>
              <at-table-column show-overflow-tooltip label='url地址' prop='aurl_change' min-width='160px'></at-table-column>
              <at-table-column show-overflow-tooltip label='所属机构' prop='aagency_name_change' min-width='160px'></at-table-column>
              </at-table>  
            </div> 
          </div>
        </div>
      </div>
    </div>
    <at-dialog title='提示' :visible.sync='clearDialogVisible' size='small'>
      <div style="text-align:center;padding-top:20px">
        <span>确认清空</span>
      </div>
      <div slot='footer' class='dialog-footer'>
        <at-button type='primary' @click.stop='clear()'>确 定</at-button>
        <at-button @click.stop='clearCancel'>取 消</at-button>
      </div>
    </at-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'informationanto',
  data () {
    return {
      clearDialogVisible: false
    }
  },
  created () {
    this.getdata()
  },
  computed: {
    ...mapState({
      syn_add: state => state.informationSystem.syn_add,
      syn_edit: state => state.informationSystem.syn_edit,
      syn_del: state => state.informationSystem.syn_del
    })
  },
  methods: {
    // 获取同步列表
    getdata () {
      this.$store.dispatch('/informationSystem/getinitadd', { 'type': 'add' })
      this.$store.dispatch('/informationSystem/getinitedit', { 'type': 'update' })
      this.$store.dispatch('/informationSystem/getinitdel', { 'type': 'delete' })
    },
    // 同步新增排序
    sortChangeadd ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'ar_time'
        order = 'ascending'
      }
      this.$store.dispatch('/informationSystem/getinitadd', {
        type: 'sorter',
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 同步更改排序
    sortChangeedit ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'ar_time'
        order = 'ascending'
      }
      this.$store.dispatch('/informationSystem/getinitedit', {
        type: 'sorter',
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 同步删除排序
    sortChangedel ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'ar_time'
        order = 'ascending'
      }
      this.$store.dispatch('/informationSystem/getinitdel', {
        type: 'sorter',
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 删除同步新消息
    deleteall () {
      this.clearDialogVisible = true
    },
    // 确认删除
    clear () {
      this.$store.dispatch('/informationSystem/deleteall')
      this.clearDialogVisible = false
    },
    clearCancel () {
      this.clearDialogVisible = false
    },
    history () {
      this.$router.push('/business/basics/informationSystem/historySystem')
    }
  }
}
</script>
<style lang='less'>
.antoSystem {
  background-color: #ffffff;
  .at-table__body-wrapper {
    overflow: hidden;
  }
  .content_wrap {
  font-family: '宋体';
  min-height: 710px;
}
 .at-popover {
  min-width: 60px;
  background: #1f92ef;
  color: aliceblue;
  }
  .titlebox {
    height: 50px;
    border-bottom: 1px solid #eeeeee;
    padding:0px;
  }
  .title {
    padding-left:20px;
    color: #5c6781;
    font-size: 14px;
    line-height:50px;
    float:left;
  }
  .min_table {
    border: 1px solid #eee;
  margin-bottom: 20px;
  }
  .history {
    float:right;
    margin-right:10px;
    margin-top:10px;
  }
  .clearanto {
    float:right;
    margin-right:20px;
    margin-top:10px;
  }
  .message {
    height:50px;
    line-height:50px;
    border-bottom: 1px solid #eeeeee;
    padding-left:20px;
  }
  .bigtable {
    padding: 20px;
    background: #fff;
  }
  .table_box {
  /* max-height: 243px;
  overflow: auto; */
  padding: 0 20px;
  margin-bottom:20px;
  }
  .table_box .at-table__body-wrapper {
		overflow: auto
	}
  .at-table thead {
    font-size: 12px;
    border-top: none;
    font-weight: 700;
  }
  .table_wrap {
    margin-bottom: 20px;
  }
  .doubleNum {
    width: 25px;
    margin-top: 4px;
    border-radius: 8.5px;
    margin-left: 10px;
  }
  .singleNum {
    width: 17px;
    border-radius: 8.5px;
    margin-left: 10px;
  }
  .more {
    border-radius: 8.5px;
    margin-left: 10px;
  }
  .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    margin-left: 10px;
  }
  .infoCount {
    display: block;
    color: #FFFFFF;
    height: 17px;
    line-height: 18px;
    text-align: center;
    font-size : 10px;
    -webkit-transform : scale(0.84,0.84);
    *font-size:10px;
  }
}
</style>



 